<template>
  <div class="header">
    <div class="header-con clearfix">
      <div class="logo pull-left">
        <img src="./logo.png"/>
      </div>
      <div class="sys-name pull-left">高考志愿填报系统 专家版</div>
      <div class="pull-left choose-object">
        <div class="dropdown">
          <button class="btn btn-choose dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"
                  aria-haspopup="true" aria-expanded="true">
            理工类本科一批
            <span class="caret"></span>
          </button>
          <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
            <li><a href="#">理工类本科二批</a></li>
            <li><a href="#">理工类本科一批</a></li>
            <li><a href="#">理工类本科二批</a></li>
          </ul>
        </div>
      </div>
      <div class="pull-right choose-object" @click="goManage()"><p class="manage-center">管理中心</p></div>
      <div class="pull-right choose-object">
        <div class="dropdown">
          <span class="glyphicon glyphicon-user user-icon"></span>
          <button class="btn btn-choose dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown"
                  aria-haspopup="true" aria-expanded="true">
            <span>{{user}}</span>
            <span class="caret"></span>
          </button>
          <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
            <li @click="signOUt()"><a>退出</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import Vue from 'vue';

  export default {
    name: 'header',
    props: [
      'user',
      'createdUser'
    ],
    methods: {
      goManage() {
        console.log("createdUser=" + this.createdUser);
        if (!this.getCookie('session')) {
          this.$router.push('/login');
        } else {
          console.log("createdUser=" + this.createdUser);
          this.$router.push({
            path: '/studentFileList', query:{
              username: this.user,
              createdUser: this.createdUser
            }
          });
        }
      },
      signOUt() {
        Vue.prototype.delCookie('admin');
        this.$router.push('/login');
      }
    }
  };
</script>

<style>
  .header {
    width: 100%;
    height: 46px;
    position: fixed;
    top: 0;
    font-size: 18px;
    font-weight: normal;
    font-style: normal;
    z-index: 5;
    opacity: 1;
    pointer-events: auto;
    border-bottom: 1px solid #bbbbbb;
    background-color: #E65A1E;
  }

  .header .header-con {
    width: 1190px;
    margin: 0 auto;
    height: 45px;
    color: #fff;
  }

  .header .header-con .sys-name {
    padding-top: 12px;
    margin-left: 10px;
  }

  .header .header-con .logo {
    width: 53px;
    padding: 12px 0;
  }

  .header .header-con .logo img {
    width: 53px;
    height: 21px;
    display: block;
  }

  .header .header-con .choose-object {
    height: 45px;
    padding: 5px;
  }

  .header .header-con .choose-object .btn:focus, .btn:active:focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn.active.focus {
    outline: none;
    border-color: transparent;
    box-shadow: none;
  }

  .header .header-con .choose-object .btn-choose,
  .header .header-con .choose-object .btn-choose:hover,
  .header .header-con .choose-object .dropdown:active {
    color: #fff;
    background-color: rgb(230, 90, 30);
    border-color: rgb(230, 90, 30);
  }

  .header .header-con .choose-object .user-icon {
    vertical-align: middle;
    margin-top: -2px;
  }

  .header .header-con .choose-object .manage-center {
    line-height: 35px;
    font-size: 14px;
    cursor: pointer;
  }
</style>
